import React, { useState, useEffect } from 'react';
import { Modal, Button, Checkbox } from 'antd';
import TRNotification from '#/utils/notification';
import PropTypes from 'prop-types';
import styles from './index.less';
const CheckboxGroup = Checkbox.Group;
import planIcon from '@/assets/img/plan_icon_dark.png';

const SettleModalComponent = ({
  title = '结算单元',
  titleSrc = planIcon,
  data,
  onPress,
  defaultCheckedList,
}) => {
  const list = data.map((item) => ({ label: item.stationName, value: item.value }));
  const [visible, setVisible] = useState(false);
  const [checkedList, setCheckedList] = useState(defaultCheckedList);
  const [indeterminate, setIndeterminate] = useState(true);
  const [checkAll, setCheckAll] = useState(false);

  useEffect(() => {
    setVisible(true);
    setIndeterminate(!!checkedList.length && checkedList.length < data.length);
    setCheckAll(checkedList.length === data.length);
  }, []);

  const _onCancel = () => {
    onPress({ index: 0 });
    setVisible(false);
  };

  const onCheckAllChange = (e) => {
    let checkAllList = data.map((item) => item.value);
    setCheckedList(e.target.checked ? checkAllList : []);
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };

  const onChange = (list) => {
    setCheckedList(list);
    setIndeterminate(!!list.length && list.length < data.length);
    setCheckAll(list.length === data.length);
  };

  const _onAllClear = () => {
    setCheckedList([]);
    setCheckAll(false);
    setIndeterminate(false);
  };

  let footerRender = [
    <Button key="dtest1" onClick={_onCancel}>
      取消
    </Button>,
  ];

  return (
    <Modal
      className={styles.settleModal}
      width={540}
      centered
      maskClosable={false}
      visible={visible}
      title={
        <div className={styles.titleDiv}>
          <img src={titleSrc} width="30px" height="30px" />
          <b> {title}</b>
        </div>
      }
      footer={footerRender}
      onCancel={_onCancel}
    >
      <div className={styles.container}>
        <div className={styles.choosebox}>
          <Checkbox
            indeterminate={indeterminate}
            onChange={onCheckAllChange}
            checked={checkAll}
            disabled
          >
            全选
          </Checkbox>
          <CheckboxGroup options={list} value={checkedList} onChange={onChange} disabled />
        </div>
        <div className={`${styles.choosebox} ${styles.borderLeft}`}>
          <div className={styles.choosebox_header}>
            <div>{`已选${checkedList.length}项`}</div>
          </div>
          {list.map((item) => {
            if (!checkedList.includes(item.value)) return null;
            return (
              <div key={item.value} className={styles.rightBoxItem}>
                <span className={styles.rightName}>{item.label}</span>
              </div>
            );
          })}
        </div>
      </div>
    </Modal>
  );
};
/**
 * data  结算单元初始化数据
 * chooseList  打开弹框回显的数据集合
 */
class SettleModal {
  __key__ = '';
  show = ({ data = [], chooseList }) => {
    return new Promise((resolve) => {
      if (this.__key__ !== '') {
        return;
      }
      this.__key__ = String(Date.now());
      TRNotification.add({
        key: this.__key__,
        content: (
          <SettleModalComponent
            data={data}
            defaultCheckedList={chooseList}
            onPress={(obj) => {
              TRNotification.remove(this.__key__);
              this.__key__ = '';
              resolve(obj);
            }}
          />
        ),
        duration: null,
      });
    });
  };
  dismiss = () => {
    if (this.__key__.length > 0) {
      TRNotification.remove(this.__key__);
      this.__key__ = '';
    }
  };
}
SettleModalComponent.propTypes = {
  title: PropTypes.string,
  titleSrc: PropTypes.string,
  data: PropTypes.array,
  onPress: PropTypes.func,
  defaultCheckedList: PropTypes.array,
};
const SettlementModal = new SettleModal();
export default SettlementModal;
